<template>
  <div>
    <div class="select">
      <!--<el-button @click="fuck" type="primary" plain>me</el-button>-->
      <div class="logo">
        信息页
      </div>
      <div class="cur">
        文章分享
      </div>
      <div class="items">
        <div id="new" class="item" style="font-size: 1.5em;color: black;" @click="changeState('new')">最新</div>
        <div id="hot" class="item" @click="changeState('hot')">最热</div>
        <div id="recommend" class="item" @click="changeState('recommend')">推荐</div>
        <div id="all" class="item" @click="changeState('all')">综合</div>
        <div id="like" class="item" @click="changeState('like')">喜爱</div>
        <div id="highlight" class="item" @click="changeState('highlight')">焦点</div>
        <div id="default" class="item"></div>
      </div>
      <p style="font-family: '微软雅黑';font-size: 0.8em;padding-left: 10%;padding-top: 10%;color:#979797">&emsp;搜索标签
      </p>
      <hr />
      <div class="help_list">
        <div class="help_item">联系电话：123456</div>
        <div class="help_item">帮助邮箱：1@qq.com</div>
        <div class="country" style="padding-top: 7%;">
          <p style="font-family: '等线'; font-size: 0.9em;color: #8D8D8D">国家：Zh_cn</p>
          <img style="width: 20px;height: 20px;padding-top: 5%;padding-left: 30%;" src="../assets/中国.png"/>
        </div>
      </div>
    </div>
    <div class="menu">
      <div class="menu_img">
        <img src="../assets/fengjing.png" style="width: 70%;overflow: hidden;position: center;padding-left: 15%"/>
      </div>
      <div style="display: flex;flex-direction: column;padding-left: auto;align-content: center;align-items: center">
        <el-button-group>
          <el-button @click="changeState('new')">最新</el-button>
          <el-button @click="changeState('hot')">最热</el-button>
          <el-button @click="changeState('recommend')">推荐</el-button>
        </el-button-group>
        <el-button-group>
          <el-button @click="changeState('all')">综合</el-button>
          <el-button @click="changeState('like')">喜爱</el-button>
          <el-button @click="changeState('highlight')">焦点</el-button>
        </el-button-group>
      </div>
      <div id="summarize">
        <div id="sum_title">当前版块统计</div>
        <div id="sum_items">
          <div class="sum_item">
            帖子数量：{{summarize.num}}
          </div>
          <div class="sum_item">
            访问数量：{{summarize.read}}
          </div>
          <div class="sum_item">
            喜欢数量：{{summarize.like}}
          </div>
          <div class="sum_item">
            标签数量：{{summarize.label}}
          </div>
        </div>
      </div>
      <div style="width: 100%;height: 8%;align-content: center;text-align: center">
        <el-button type="primary" plain @click="$router.push('/addlist')">创建我的文章</el-button>
      </div>
      <div style="width: 100%;height: 10%;align-content: center;text-align: center;">
        <el-select
                v-model="searchLabel"
                multiple
                filterable
                default-first-option
                placeholder="请选择文章标签">
          <el-option
                  v-for="item in suggestLabel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" plain @click="search" circle icon="el-icon-search" style="margin-left: 5%"></el-button>
      </div>
    </div>
    <div class="right">
      <div class="detail">
        <div class="panel" v-for="(item,idx) in panel" :key="idx">
          <el-card shadow="hover">
            <div class="panel_img">
              <img :src="'https://localhost:8848/images/1/'+item.img" style="width: 100%"/>
            </div>
            <div class="panel_info">
              <div class="info">
                <img src="../assets/panel/时间.png" class="panel_info_img">
                <div class="panel_info_txt">发布时间：{{item.date}}</div>
              </div>
              <div class="info">
                <img src="../assets/panel/阅读.png" class="panel_info_img">
                <div class="panel_info_txt">阅读数量：{{item.read}}</div>
              </div>
              <div class="info">
                <img src="../assets/panel/心.png" class="panel_info_img">
                <div class="panel_info_txt">喜欢：{{item.like}}</div>
              </div>
              <div class="info">
                <img src="../assets/panel/标签.png" class="panel_info_img">
                <div style="display: flex;flex-direction: row">
                  <div v-for="(label_item,idxxx) in item.label" :key="idxxx">
                    <div class="panel_info_txt">{{label_item}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div style="display: flex;flex-direction: row">
              <div style="font-size: 1.6em">{{item.title}}</div>
              <div style="font-size: 1em;padding-left: 20px;padding-top: 4px;font-style: italic">{{item.subtitle}}</div>
            </div>
            <div>
              <div style="font-size: 0.4em">
                <p style="font-size: 1em">自动摘要：</p>
                {{item.abstract}}
                <el-button type="text" @click="read(idx)" style="padding-left: 20px">阅读全文>></el-button>
              </div>
            </div>
          </el-card>

          <!--下面是弹出详情页面-->

          <el-dialog
                  title="查看文章详情"
                  :visible="centerDialogVisible[idx]"
                  width="80%"
                  center>
            <div class="panel_img">
              <img :src="'https://localhost:8848/images/1/'+item.img" style="width: 100%"/>
            </div>
            <div class="panel_info">
              <div class="info">
                <img src="../assets/panel/时间.png" class="panel_info_img">
                <div class="panel_info_txt">发布时间：{{item.date}}</div>
              </div>
              <div class="info">
                <img src="../assets/panel/阅读.png" class="panel_info_img">
                <div class="panel_info_txt">阅读数量：{{item.read}}</div>
              </div>
              <div class="info">
                <img src="../assets/panel/心.png" class="panel_info_img">
                <div class="panel_info_txt">喜欢：{{item.like}}</div>
              </div>
              <div class="info">
                <img src="../assets/panel/标签.png" class="panel_info_img">
                <div style="display: flex;flex-direction: row">
                  <div v-for="(label_item,idxxx) in item.label" :key="idxxx">
                    <div class="panel_info_txt">{{label_item}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="panel_title">{{item.title}}</div>
            <div class="panel_subtitle">{{item.subtitle}}</div>
            <div class="panel_author">作者：{{item.author}}</div>
            <div class="panel_txt">{{item.content}}</div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="like(idx)" :disabled="likes[idx]" icon="el-icon-star-on" type="danger" plain></el-button>
              <el-button type="primary" @click="changeDialog(idx,false)">返回</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
      <!--<div class="usr">-->
        <!--&lt;!&ndash;<img src="../assets/红心.png" style="width: 20px;height:20px;padding-left: 5%;padding-top: 2%"/>&ndash;&gt;-->
        <!--&lt;!&ndash;<img src="../assets/不喜欢.png" style="width: 20px;height:20px;padding-left: 2%;padding-top: 2%;"/>&ndash;&gt;-->
        <!--<div style="font-size: 0.8em;padding-left: 18%;padding-top: 2%;width: 50px ; height: 100%;">分享</div>-->
        <!--<img class="share_img" src="../assets/朋友圈.png">-->
        <!--<img class="share_img" src="../assets/微博.png">-->
        <!--<img class="share_img" src="../assets/GitHub.png"/>-->
      <!--</div>-->
    </div>
  </div>
</template>

<script>

export default {
  name: 'home',
  components: {
  },
  data:function () {
      return{
          summarize:{},
          panel:[],
          centerDialogVisible:[],
          likes:[],
          current:'new',
          suggestLabel:[
              {
                  value:'风景',
                  label:'风景'
              },
              {
                  value:'建筑',
                  label:'建筑'
              },
              {
                  value:'美女',
                  label:'美女'
              },
              {
                  value:'植物',
                  label:'植物'
              },
              {
                  value:'动物',
                  label:'动物'
              },
              {
                  value:'动漫',
                  label:'动漫'
              },
              {
                  value:'游戏',
                  label:'游戏'
              },
              {
                  value:'科技',
                  label:'科技'
              },
              {
                  value:'产品',
                  label:'产品'
              },
              {
                  value:'其它',
                  label:'其它'
              },
          ],
          searchLabel:[]
      }
  },
  beforeCreate:function () {
      let xhr = new XMLHttpRequest();
      xhr.withCredentials = true;
      let that = this;
      xhr.onreadystatechange = function(){
          if (xhr.readyState===4&&xhr.status===200){
              let text = xhr.responseText;
              that.panel = JSON.parse(text);
              that.centerDialogVisible = Array(that.panel.length);
              that.likes = Array(that.panel.length);
              for (let i = 0; i < that.panel.length; i++){
                  that.centerDialogVisible[i] = false;
                  that.likes[i]=false;
              }
              if(that.panel.length===0){
                  that.$notify.warning({
                      title:'数据异常',
                      message:'没有找到文章列表'
                  })
              }
              //that.addEvent();
              that.getTotal();
          }else if (xhr.status!==200&&xhr.status!==204&&xhr.status!==0) {
              that.$notify.error({
                  title:'错误',
                  message:'未能从服务器获得文章列表,错误码：'+xhr.status,
              })
          }
      };
      xhr.open('GET','https://localhost:8848/newlist');
      xhr.setRequestHeader('Content-Type',"application/json; charset=utf-8");
      xhr.send();
  },
  methods:{
      getTotal:function () {
          let xhr = new XMLHttpRequest();
          xhr.withCredentials = true;
          let that = this;
          xhr.onreadystatechange = function(){
              if (xhr.readyState===4&&xhr.status===200){
                  let text = xhr.responseText;
                  that.summarize = JSON.parse(text);
                  that.summarize.label = that.summarize.label.length;
              }else  if (xhr.status!==200&&xhr.status!==204&&xhr.status!==0) {
                  that.$notify.error({
                      title:'错误',
                      message:'未能从服务器获得文章统计,错误码'+xhr.status,
                  })
              }
          };
          xhr.open('GET','https://localhost:8848/gettotal');
          xhr.setRequestHeader('Content-Type',"application/json; charset=utf-8");
          xhr.send();
      },
      changeDialog:function (idx,watch) {
          //alert(idx+','+close);
          //this.centerDialogVisible[idx]=close;
          this.$set(this.centerDialogVisible,idx,watch)
      },
      read:function (idx) {
          this.changeDialog(idx,true);
          this.panel[idx].read++;
          this.updateList(idx);
      },
      like:function(idx){
          this.$set(this.likes,idx,true);
          this.panel[idx].like++;
          this.updateList(idx);
      },
      updateList:function (idx) {
          let xhr = new XMLHttpRequest();
          xhr.withCredentials = true;
          let that = this;
          xhr.onreadystatechange = function(){
              if (xhr.readyState===4&&xhr.status===200){
                  that.$notify.success({
                      title:'更新成功',
                      message:'更新数据成功'
                  })
              }else  if (xhr.status!==200&&xhr.status!==204&&xhr.status!==0) {
                  that.$notify.error({
                      title:'错误',
                      message:'数据更新失败,错误码'+xhr.status,
                  })
              }
          };
          xhr.open('POST','https://localhost:8848/updatelist');
          xhr.setRequestHeader('Content-Type',"application/json; charset=utf-8");
          xhr.send(JSON.stringify(this.panel[idx]));
      },
      changeState:function (cmd) {
          document.getElementById(this.current).style.fontSize=document.getElementById('default').style.fontSize;
          document.getElementById(this.current).style.color=document.getElementById('default').style.color;
          this.current=cmd;
          document.getElementById(cmd).style.fontSize='1.5em';
          document.getElementById(cmd).style.color='black';
          switch (cmd) {
              case 'new':{
                  let arr = this.panel.slice(0);
                  arr.sort(function (a,b) {
                      return new Date(b.date).getTime()-new Date(a.date).getTime();
                  });
                  this.panel = arr;
                  break;
              }
              case 'hot':{
                  let arr = this.panel.slice(0);
                  arr.sort(function (a,b) {
                      return b.read-a.read;
                  });
                  this.panel = arr;
                  break;
              }
              case 'recommend':{
                  this.getRecommend();
                  break;
              }
              case 'all':{
                  let arr = this.panel.slice(0);
                  arr.sort(function (a,b) {
                      return b.read*0.7+b.like*0.3-a.read*0.7+a.like*0.3;
                  });
                  this.panel = arr;
                  break;
              }
              case 'like':{
                  let arr = this.panel.slice(0);
                  arr.sort(function (a,b) {
                      return b.like-a.like;
                  });
                  this.panel = arr;
                  break;
              }
              case 'highlight':{
                  //TODO
                  break;
              }
              default:{
                  this.$notify.error({title:'未知错误'})
              }
          }
      },
      search:function () {
          let xhr = new XMLHttpRequest();
          xhr.withCredentials = true;
          let that = this;
          xhr.onreadystatechange = function(){
              if (xhr.readyState===4&&xhr.status===200){
                  let text = xhr.responseText;
                  let json = JSON.parse(text);
                  let arr = [];
                  for (let k in json){
                      arr.push(json[k]);
                  }
                  arr.sort(function (a,b) {
                      return b.match-a.match;
                  });
                  let ar=[];
                  for (let i=0;i<arr.length;i++){
                      ar.push(arr[i].data);
                  }
                  that.panel=ar;
              }else  if (xhr.status!==200&&xhr.status!==204&&xhr.status!==0) {
                  that.$notify.error({
                      title:'错误',
                      message:'搜索失败,错误码'+xhr.status,
                  })
              }
          };
          xhr.open('POST','https://localhost:8848/search');
          xhr.setRequestHeader('Content-Type',"application/json; charset=utf-8");
          xhr.send(JSON.stringify(this.searchLabel));
      },
      getRecommend:function () {
          let xhr = new XMLHttpRequest();
          xhr.withCredentials = true;
          let that = this;
          xhr.onreadystatechange = function(){
              if (xhr.readyState===4&&xhr.status===200){
                  let text = xhr.responseText;
                  let json = JSON.parse(text);
                  let tmpArr = ['风景','建筑','美女','植物','动物','动漫','游戏','科技','产品','其它'];
                  let tmp = [];
                  for (let i=0;i<tmpArr.length;i++){
                      tmp.push({
                          label:tmpArr[i],
                          num:json.like[tmpArr[i]]+json.query[tmpArr[i]],
                      })
                  }
                  tmp.sort(function (a,b) {
                      return b.num-a.num;
                  });
                  let params = [];
                  for (let i =0;i<3;i++){
                      params.push(tmp[i].label);
                  }
                  that.searchLabel=params;
                  that.search();
              }else  if (xhr.status!==200&&xhr.status!==204&&xhr.status!==0) {
                  that.$notify.error({
                      title:'错误',
                      message:'推荐信息查找失败,错误码'+xhr.status,
                  })
              }
          };
          xhr.open('GET','https://localhost:8848/recommend');
          xhr.setRequestHeader('Content-Type',"application/json; charset=utf-8");
          xhr.send();
      }
      // addEvent:function () {
      //     document.getElementById('new').onclick = this.changeState;
      //     document.getElementById('hot').onclick = this.changeState;
      //     document.getElementById('recommend').onclick = this.changeState;
      //     document.getElementById('all').onclick = this.changeState;
      //     document.getElementById('like').onclick = this.changeState;
      //     document.getElementById('highlight').onclick = this.changeState;
      // }
  }
}
</script>


<style scoped src="../css/style.css"></style>
